import React, { Component } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import router from 'umi/router';
import { DownloadOutlined } from '@ant-design/icons';
import { Card, Table, Button, Modal, Alert } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import FooterToolbar from '@/components/FooterToolbar';
import StandardTable from '@/components/StandardTable';
import downloadFile, { urlParse } from '@/utils/utils';

const { Description } = DescriptionList;

@connect(({ incexpcompns, loading }) => ({
  detailInfo: incexpcompns.detailInfo,
  pageData: incexpcompns.pageData,
  loading: loading.effects['incexpcompns/fetchDetail'],
}))
class BasicProfile extends Component {
  componentDidMount() {
    const { dispatch, location } = this.props;
    const { budgId } = urlParse(location.search);
    dispatch({
      type: 'incexpcompns/fetchDetail',
      payload: { budgId },
    });
    this.setState({ budgId }, () => {
      this.getList();
    });
  }

  // 导出数据
  export = () => {
    const { budgId } = this.state;
    Modal.info({
      title: '温馨提示',
      content: '默认导出当前条件下所有数据',
      okText: '知道了',
      maskClosable: true,
      cancelText: '取消',
      onOk: () => {
        downloadFile({ budgId }, '/nsApi/nsBudget/exportExcel', 'POST');
      },
    });
  };

  // 获取人员明细列表
  getList = (currentPage = 1, pageSize = 10) => {
    const { dispatch } = this.props;
    const { budgId } = this.state;
    const pageArg = { currentPage, pageSize };
    dispatch({
      type: 'incexpcompns/fetchEmpList',
      payload: { budgId, pageArg },
    });
  };

  // 表格有变化：比如：切换页码
  handleStandardTableChange = pagination => {
    this.getList(pagination.current, pagination.pageSize);
  };

  render() {
    const { detailInfo, pageData, loading } = this.props;
    const columns = [
      {
        title: '险种/公积金',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '实支状态',
        dataIndex: 'budgStateName',
        key: 'budgStateName',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '实收合计',
        dataIndex: 'realAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '实支合计',
        dataIndex: 'budgAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '差异金额',
        dataIndex: 'diffAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
    ];
    const empColumns = [
      {
        title: '业务年月',
        dataIndex: 'busiYmStr',
        fixed: 'left',
        render: val => (val && moment(val).format('YYYY-MM')) || '--',
      },
      {
        title: '姓名',
        dataIndex: 'empName',
        fixed: 'left',
      },
      {
        title: '证件号',
        dataIndex: 'certNo',
        align: 'center',
        width: 260,
      },
      {
        title: '客户名称',
        dataIndex: 'custName',
        align: 'center',
        width: 260,
      },
      {
        title: '养老保险',
        children: [
          {
            title: '个人实收',
            dataIndex: 'pensPerRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '个人实支',
            dataIndex: 'pensPerBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实收',
            dataIndex: 'pensEntpRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实支',
            dataIndex: 'pensEntpBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '差额',
            dataIndex: 'pensDiffAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
        ],
      },
      {
        title: '失业保险',
        children: [
          {
            title: '个人实收',
            dataIndex: 'unempPerRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '个人实支',
            dataIndex: 'unempPerBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实收',
            dataIndex: 'unempEntpRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实支',
            dataIndex: 'unempEntpBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '差额',
            dataIndex: 'unempDiffAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
        ],
      },
      {
        title: '工伤保险',
        children: [
          {
            title: '个人实收',
            dataIndex: 'injPerRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '个人实支',
            dataIndex: 'injEntpBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实收',
            dataIndex: 'injEntpRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实支',
            dataIndex: 'injPerBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '差额',
            dataIndex: 'injDiffAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
        ],
      },
      {
        title: '医疗保险',
        children: [
          {
            title: '个人实收',
            dataIndex: 'medPerRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '个人实支',
            dataIndex: 'medPerBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实收',
            dataIndex: 'medEntpRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实支',
            dataIndex: 'medEntpBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '差额',
            dataIndex: 'medDiffAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
        ],
      },
      {
        title: '生育保险',
        children: [
          {
            title: '个人实收',
            dataIndex: 'birthPerRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '个人实支',
            dataIndex: 'birthPerBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实收',
            dataIndex: 'birthEntpRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实支',
            dataIndex: 'birthEntpBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '差额',
            dataIndex: 'birthDiffAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
        ],
      },
      {
        title: '社保其他费用实收',
        dataIndex: 'insRealOthAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '社保其他费用实支',
        dataIndex: 'insBudgOthAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '社保实收合计',
        dataIndex: 'insRealAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '社保实支合计',
        dataIndex: 'insBudgAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '社保总差额',
        dataIndex: 'insSumDiffAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '公积金',
        children: [
          {
            title: '个人实收',
            dataIndex: 'accuPerRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '个人实支',
            dataIndex: 'accuPerBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实收',
            dataIndex: 'accuEntpRealAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '企业实支',
            dataIndex: 'accuEntpBudgAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
          {
            title: '差额',
            dataIndex: 'accuDiffAmo',
            align: 'right',
            render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
          },
        ],
      },
      {
        title: '公积金其他费用实收',
        dataIndex: 'accuRealOthAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '公积金其他费用实支',
        dataIndex: 'accuBudgOthAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '公积金实收合计',
        dataIndex: 'accuRealAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '公积金实支合计',
        dataIndex: 'accuBudgAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
      {
        title: '公积金总差额',
        dataIndex: 'accuSumDiffAmo',
        align: 'right',
        render: val => <span>{val === 0 ? 0 : (val && val) || '--'}</span>,
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card title={<span style={{ fontWeight: 'bolder' }}>差异信息</span>}>
          <DescriptionList style={{ marginBottom: 24 }}>
            <Description term="签约方">{detailInfo.sendSuppName || '--'}</Description>
            <Description term="账单年月">
              {(detailInfo.billYmStr && moment(detailInfo.billYmStr).format('YYYY-MM')) || '--'}
            </Description>
            <Description term="实支状态">{detailInfo.budgStateName || '--'}</Description>
            <Description term="实收合计">
              {detailInfo.realAmo === 0 ? 0 : (detailInfo.realAmo && detailInfo.realAmo) || '--'}
            </Description>
            <Description term="实支合计">
              {detailInfo.budgAmo === 0 ? 0 : (detailInfo.budgAmo && detailInfo.budgAmo) || '--'}
            </Description>
            <Description term="差异金额">
              {detailInfo.diffAmo === 0 ? 0 : (detailInfo.diffAmo && detailInfo.diffAmo) || '--'}
            </Description>
          </DescriptionList>
          <Alert
            message={<span>未实支的社保公积金数据不进行差异对比，显示为--</span>}
            type="info"
            showIcon
          />
          <Table
            pagination={false}
            loading={loading}
            dataSource={detailInfo.list || []}
            columns={columns}
            rowKey={(_, index) => index}
          />
        </Card>
        <Card title={<span style={{ fontWeight: 'bolder' }}>人员明细</span>}>
          <Button
            style={{ marginBottom: '20px' }}
            type="primary"
            icon={<DownloadOutlined />}
            onClick={() => {
              this.export();
            }}
          >
            导出
          </Button>
          <StandardTable
            bordered
            selectedRowKeys={[]}
            selectedRows={[]}
            rowSelection={null}
            loading={loading}
            columns={empColumns}
            scroll={{ x: 4600 }}
            rowKey={(_, index) => index}
            data={pageData}
            onChange={this.handleStandardTableChange}
          />
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={() => router.goBack()}>返回</Button>
        </FooterToolbar>
      </PageHeaderWrapper>
    );
  }
}

export default BasicProfile;
